<template>
	<view class="page">

		<!-- 背景 -->
		<image class="page-bg" mode="widthFix" :src="imageUrl +'hg-bg7.jpg'"></image>

		<!-- 头部 -->
		<u-sticky offset-top="0" :bgColor="bgColor">
			<u-navbar leftText=" " title=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
		</u-sticky>

		<!-- 主内容 -->
		<view class="page-content">
			<view class="wp">
				<view class="box-hg1">
					<image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg8.png'"></image>
					<view class="top">
						<view class="t1">积分余额</view>
						<view class="t2"><view class="num">1002</view></view>
					</view>
					<view class="t3">
						<view class="t3-item">
							<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon6.png'"></image>
							查看积分明细
						</view>
					</view>
				</view>
			</view>
			<view class="boxHome-hg1 v2">
				<view class="boxAd-hg1">
					<image class="icon" mode="widthFix" :src="imageUrl + 'hg-icon10.png'"></image>
					停车缴费获得积分
					<image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow1.png'"></image>
				</view>
				<view class="box-hg2">
					<view class="wp">
						<view class="top-hg1">
							<view class="t1">积分兑换专区</view>
						</view>
						<view class="lst-hg7">
							<view class="item" v-for="(item, index) in 16" :key="index">
								<image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg9.png'"></image>
								<view class="left">
									<view class="t1">￥<view class="num">2</view></view>
									<view class="t2">满20可使用</view>
									<view class="t3">
										<text>不可叠加</text>
									</view>
								</view>
								<view class="center">
									<view class="t1">停车优惠券</view>
									<view class="t2">xxxxx停车场2元券</view>
									<view class="t3">有效期至2025-10-01</view>
								</view>
								<view class="right">
									<view class="t1"><view class="num">20</view>积分</view>
									<view class="btns">
										<view class="a1" @click="popShow1=true">立即兑换</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup
			:show="popShow1"
			mode="center"
			bgColor="transparent"
			closeable
			@close="popShow1=false"
		>
			<view class="popWin-hg1">
				<image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
				<view class="tit">您将花费100积分兑换此券</view>
				<view class="desc">兑换后，请在我的优惠券中查看</view>
				<view class="btns">
					<view class="item a1" @click="popShow1=false">取消</view>
					<view class="item a2">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				// 头部背景色
				bgColor: 'transparent',

				// 兑换弹窗
				popShow1: false

			}
		},
		onLoad() {

		},
		methods: {
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = '#ffffff'
				} else {
					this.bgColor = 'transparent'
				}
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">

page{
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

</style>